<template>
  <div>
    <TitlePanel></TitlePanel>
    <van-form
      input-align="right"
      error-message-align="right"
      :show-error-message="false"
      show-error
      scroll-to-error
      validate-first
      @failed="onFailed"
      @submit="onSubmit"
    >
      <van-field
        v-model="obj.dateOfDisinfection"
        name="dateOfDisinfection"
        label="消毒日期"
        placeholder="请选择时间"
        input-align="right"
        is-link
        autocomplete="off"
        required
        readonly
        @click="showDate = true"
        :rules="[{ required: true, message: '请选择消毒日期' }]"
      />
      <van-field
        v-model="obj.disinfectionOfPlaceName"
        name="disinfectionOfPlaceName"
        label="消毒场所"
        required
        autocomplete="off"
        readonly
        placeholder="请选择消毒场所"
        is-link
        input-align="right"
        @click="showPlace = true"
        :rules="[{ required: true, message: '请选择消毒场所' }]"
      />
      <van-field
        v-model="obj.disinfectionName"
        name="height"
        label="消毒药名称"
        autocomplete="off"
        required
        readonly
        placeholder="请选择消毒药"
        is-link
        input-align="right"
        :rules="[{ required: true, message: '请选择消毒药' }]"
        @click="goSelect"
      />
      <van-field
        v-model="obj.usingTheDose"
        name="usingTheDose"
        label="使用剂量"
        required
        placeholder="请输入使用剂量"
        autocomplete="off"
        input-align="right"
        :rules="[{ required: true, message: '请输入使用剂量' }]"
      />
      <van-field
        v-model="obj.unitsName"
        name="unitsCode"
        label="单位"
        required
        autocomplete="off"
        placeholder="请选择单位"
        readonly
        is-link
        input-align="right"
        :rules="[{ required: true, message: '请选择单位' }]"
        @click="showUnit = true"
      />
      <van-field
        :border="false"
        v-model="obj.disinfectionMethodName"
        name="disinfectionMethodName"
        label="消毒方法"
        required
        autocomplete="off"
        placeholder="请选择消毒方法"
        is-link
        readonly
        input-align="right"
        :rules="[{ required: true, message: '请选择消毒方法' }]"
        @click="showMethod = true"
      />

      <div class="spacing" />
      <div class="add-btn">
        <van-button
          block
          type="info"
          color="#37B5B5"
          style="width: 85%; margin: auto; margin-top: 50px"
          native-type="submit"
          size="large"
          :loading="loading"
          loading-text="提交中..."
          >保存</van-button
        >
      </div>
    </van-form>
    <!-- 消毒日期 -->
    <van-popup v-model="showDate" position="bottom">
      <van-datetime-picker type="date" v-model="currentDate" @confirm="handleConfirm" @cancel="showDate = false" />
    </van-popup>
    <!-- 消毒场所 -->
    <van-popup v-model="showPlace" position="bottom">
      <div class="head">
        <span @click="showPlace = false">取消</span>
        <p>选择场所</p>
        <span @click="placeSave">确定</span>
      </div>
      <div class="places">
        <div class="place_item" v-for="(item, index) in placeList" :key="item.id" @click="toggle(index)">
          <span>{{ item.name }}</span>
          <van-checkbox v-model="item.check" shape="square"></van-checkbox>
        </div>
      </div>
    </van-popup>
    <!-- 单位选择 -->
    <van-popup v-model="showUnit" position="bottom">
      <van-picker
        title="选择单位"
        show-toolbar
        :columns="unitList"
        value-key="name"
        @confirm="unitConfirm"
        @cancel="showUnit = false"
      />
    </van-popup>
    <!-- 方法选择 -->
    <van-popup v-model="showMethod" position="bottom">
      <van-picker
        title="选择方法"
        show-toolbar
        :columns="methodList"
        value-key="name"
        @confirm="methodConfirm"
        @cancel="showMethod = false"
      />
    </van-popup>
  </div>
</template>
<script>
import { disinfectionEdit, dictionaryList } from '@/api/record'
import {
  Form,
  Field,
  Calendar,
  RadioGroup,
  Radio,
  Dialog,
  Toast,
  DatetimePicker,
  Picker,
  Button,
  Icon,
  Popup,
  Cell,
  Checkbox,
  CheckboxGroup,
  CellGroup
} from 'vant'
import TitlePanel from '@/components/titlePanel'
import { getValue, setValue, clearValue } from '@/utils/auth'
import { disinfectionRecordDetail } from '@/api/record'
import moment from 'moment'
import dayjs from 'dayjs'

export default {
  components: {
    TitlePanel,
    [Form.name]: Form,
    [Field.name]: Field,
    [Calendar.name]: Calendar,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Picker.name]: Picker,
    [DatetimePicker.name]: DatetimePicker,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Toast.name]: Toast,
    [Cell.name]: Cell,
    [Dialog.Component.name]: Dialog.Component,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [CellGroup.name]: CellGroup
  },
  data() {
    return {
      showDate: false, // 日期展示
      showPlace: false, // 场所展示
      showUnit: false, // 单位展示
      showMethod: false, // 方法展示
      loading: false,
      isDisabled: false,
      currentDate: new Date(), // 今天日期
      obj: {
        disinfectionName: '',
        disinfectionNameCode: '',
        dateOfDisinfection: ''
      },
      placeList: [], // 消毒场所
      unitList: [], // 单位
      methodList: [], // 方法
      type: null
    }
  },
  async mounted() {
    await this.loadZidian()
    await this.loadEditData()
    this.$bridge.register('refresh', data => {
      if (getValue('productEditf')) {
        const productEditf = JSON.parse(getValue('productEditf'))
        this.obj.disinfectionName = productEditf.name
        this.obj.disinfectionNameCode = productEditf.typeInfo.code
      }
    })
  },
  methods: {
    // 加载编辑数据
    async loadEditData() {
      const id = getValue('disinfectionRecordId')
      await disinfectionRecordDetail(id).then(res => {
        if (res.status === 0) {
          const datas = res.data

          datas.disinfectionOfPlaceName = datas.disinfectionOfPlace
            .map(ele => {
              return ele.name
            })
            .toString()
          datas.unitsName = datas.units.name
          datas.unitsCode = datas.units.code
          datas.disinfectionMethodName = datas.disinfectionMethod.name
          datas.disinfectionMethodCode = datas.disinfectionMethod.code
          const pList = datas.disinfectionOfPlace.map(item => item.code)
          this.placeList.forEach(ele => {
            for (let i = 0; i < pList.length; i++) {
              if (ele.code === pList[i]) {
                ele.check = true
                continue
              }
            }
          })
          this.obj = datas
          this.obj.dateOfDisinfection = dayjs(this.obj.dateOfDisinfection).format('YYYY-MM-DD')
        }
      })
    },
    // 获取字典
    async loadZidian() {
      // 单位
      await dictionaryList('T000010_UNITS_CODE').then(res => {
        if (res.status === 0) {
          this.unitList = res.data.rows
        }
      })
      // 场所
      await dictionaryList('T000010_DISINFECTION_OF_PLACE').then(res => {
        if (res.status === 0) {
          res.data.rows.forEach(ele => {
            ele.check = false
          })
          this.placeList = res.data.rows
        }
      })
      // 方法
      await dictionaryList('T000010_METHOD_OF_DISINFECTION_CODE').then(res => {
        if (res.status === 0) {
          this.methodList = res.data.rows
        }
      })
    },
    onFailed(errorInfo) {
      Toast(errorInfo.errors[0].message)
    },
    onSubmit() {
      this.loading = true
      Toast.loading({
        forbidClick: true,
        duration: 0
      })
      disinfectionEdit(this.obj).then(res => {
        if (res.status == 0) {
          Toast.success('修改成功')
          clearValue('productEditf')
          clearValue('disinfectionRecordId')
          clearValue('editYaoId')
          setTimeout(() => {
            this.$bridge.call('base.closePage')
          }, 1000)
        } else {
          Toast.fail(res.msg || '操作失败')
          this.loading = false
        }
      })
    },
    // 选择药品
    goSelect() {
      setValue('swFlag', '')
      setValue('editYaoId', this.obj.disinfectionMethod.id)
      this.$bridge.call('selectProductsFzm')
    },
    // 选择日期1
    handleConfirm(val) {
      this.obj.dateOfDisinfection = moment(val).format('YYYY-MM-DD')
      this.showDate = false
    },
    // 选择场所-确定
    placeSave() {
      let arr = []
      arr = this.placeList.filter(ele => {
        return ele.check
      })
      this.obj.disinfectionOfPlaceCodes = arr.map(item => item.code).toString()
      this.obj.disinfectionOfPlaceName = arr.map(item => item.name).toString()
      this.showPlace = false
    },
    // 选择场所-复选框
    toggle(index) {
      this.placeList[index].check = !this.placeList[index].check
    },
    // 确认 -单位
    unitConfirm(val) {
      this.obj.unitsName = val.name
      this.obj.unitsCode = val.code
      this.showUnit = false
    },
    // 确认-方法
    methodConfirm(val) {
      this.obj.disinfectionMethodName = val.name
      this.obj.disinfectionMethodCode = val.code
      this.showMethod = false
    }
  }
}
</script>
<style lang="scss" scoped>
.places {
  padding: 0 16px;
  box-sizing: border-box;
  .place_item {
    border-bottom: 1px solid #e9e9e9;
    padding: 15px 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.head {
  display: flex;
  padding: 15px 16px;
  box-sizing: border-box;
  justify-content: space-between;
  font-size: 15px;
  border-bottom: 1px solid #e9e9e9;
  span {
    color: #409eff;
  }
  p {
    color: #666666;
  }
}
.tip {
  padding-top: 15px;
  color: #999999;
  font-size: 12px;
  line-height: 16px;
  margin: auto;
}
.btn {
  width: 80%;
  margin: 50px auto 0 auto;
}
.btn > div {
  height: 50px;
  background: #2871fe;
  border-radius: 4px;
  text-align: center;
  line-height: 50px;
  color: #ffffff;
  font-size: 17px;
}
.btn .cancel {
  margin-top: 20px;
  background: rgba(40, 113, 254, 0.1);
  border: 1px solid #2871fe;
  color: #2871fe;
}
::v-deep .van-field__label {
  width: 6em;
}
.bthStyle {
  width: 56px;
  height: 20px;
  border-radius: 10px;
  border: 1px solid #2871fe;
}
.active {
  background-color: #fff;
  color: #2871fe;
}
.add-btn {
  padding-bottom: 20px;
}
.addbtn {
  width: 50px;
  height: 24px;
  font-size: 13px;
  padding: 0;
  margin-right: 13px;
  z-index: 10;
  float: right;
  margin-top: -38px;
}
.btnfrom {
  padding: 14px 0;
}
.fromInput {
  width: 100%;
}
</style>
